<template>
    <div id="dataanalyst">



        <div class="test">


            <ul>
                <li> <span class="el-icon-price-tag " style="font-size: 18px;"></span>
                    <el-switch v-model="value1" active-color="#409EFF" inactive-color="#DCDFE6" inactive-text="订单编号">
                        >

                    </el-switch>
                </li>
                <li> <span class="el-icon-s-operation " style="font-size: 18px;"></span>
                    <el-switch v-model="value2" active-color="#409EFF" inactive-color="#DCDFE6" inactive-text="分类">
                        >
                    </el-switch></li>
                <li> <span class="el-icon-coin " style="font-size: 18px;"></span>
                    <el-switch v-model="value3" active-color="#409EFF" inactive-color="#DCDFE6" inactive-text="金额">
                        >
                    </el-switch></li>
                <li> <span class="el-icon-document-copy " style="font-size: 18px;"></span>
                    <el-switch v-model="value4" active-color="#409EFF" inactive-color="#DCDFE6" inactive-text="状态">
                        >
                    </el-switch></li>
                <li> <span class="el-icon-time " style="font-size: 18px;"></span>
                    <el-switch v-model="value5" active-color="#409EFF" inactive-color="#DCDFE6" inactive-text="下单时间">
                        >
                    </el-switch></li>
                <li> <span class="el-icon-user" style="font-size: 18px;"></span>
                    <el-switch v-model="value6" active-color="#409EFF" inactive-color="#DCDFE6" inactive-text="买家">
                        >
                    </el-switch></li>
                <li> <span class="el-icon-phone " style="font-size: 18px;"></span>
                    <el-switch v-model="value7" active-color="#409EFF" inactive-color="#DCDFE6" inactive-text="手机号">
                        >
                    </el-switch></li>
                    <li> <span class="el-icon-search" style="font-size: 18px;"></span>
                        <el-switch v-model="value8" active-color="#409EFF" inactive-color="#DCDFE6" inactive-text="查看">
                            >
                        </el-switch></li>
            </ul>

        </div>





    </div>
</template>
<script>
    export default {
        data() {
            return {
                value1: false,
                value2: false,
                value3: true,
                value4: false,
                value5: true,
                value6: true,
                value7: false,
                value8: true,
            };
        },
    };
</script>
<style scoped>
  div /deep/  .el-switch__label * {
    line-height: 1;
    font-size: 14px;
    display: inline-block;
    padding-left: 20px;
}
    .test {
        width: 198px;
        height: 308px;
        background-color: #fff;
        /* margin-left: 420px; */
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
    }

    #dataanalyst {
        width: 198px;
        height: 308px;
        /* background-color: pink; */
    }

    ul>li {
        list-style: none;
        padding: 9px 15px;
    }

    div /deep/ [class*=" el-icon-"],
    [class^=el-icon-] {
        font-family: element-icons !important;
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: middle;
        display: inline-block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
</style>